<template>
    <!-- 页面布局盒子 -->
    <div class="home_box">
      <!-- 文章左侧盒子 -->
      <div class="home_left_boxs">
        <a-card>
          <h2><b style="font-weight: bold;color: pink;">{{ itemtit }}</b> 标签文章</h2>
          <p>共搜到<b style="font-weight: bold;color: pink;">{{ total }}</b> 篇</p> 
        </a-card>
        <br/>
        <a-card :loading="false" style="width: 100%">
          <div class="home_category">
            <span style="color: pink;">all</span>
            <span v-for="item in tagList" :key="item.id"   @click="() => handeltags(item.value)"
              :class="item.value == route.params.id ?'strong':''"
              >{{ item.label }}</span>
          </div>
        </a-card>
        <a-card :loading="false" v-for="item in tagsLists" :key="item.id">
          <component :is="Articleitem" :item="item"></component>
        </a-card>
        <a-card v-if="tagsLists.length<=0">页面暂无数据</a-card>
      </div>
  
      <div class="home_right_boxs">
        <a-card title="推荐阅读" style="width: 300px">
          <div class="right_overf">
            <div class="recommend_text" v-for="item in recommendList" :key="item.id">
              {{ item.title }} · {{ Math.abs(dayjs().diff(dayjs(item.createAt), 'day')) }} 天前
            </div>
          </div>
        </a-card>
        <br />
        <a-card title="文章标签" style="width: 300px">
          <div class="right_tag">
            <button v-for="item in CategoryList" :key="item.id" @click="()=>handeltocate(item.value)">
              {{ item.label }} {{ item.articleCount }}
            </button>
            <!-- {{  }} -->
          </div>
        </a-card>
      </div>
    </div>
  </template>
  
  <!-- -->
  <script setup lang="ts">
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
  import { ref, computed, onMounted, getCurrentInstance, ComponentInternalInstance, watch } from "vue";
  //引入日期转换装置
  import dayjs from 'dayjs'
  //引入pinia
  import { storeToRefs } from "pinia";
  import { useHomes } from "../store/home";
  import Articleitem from "../components/articleitem.vue"
  import { useRouter,useRoute } from "vue-router"
  import {useTags} from "../store/tags"
  let router = useRouter(),route = useRoute();
  let tags = useTags();
  tags.gettags(route.params.id)
  let {tagsLists,total} = storeToRefs(tags);
  //跳转详情页
  let toarchdetail = (id: any) => {
    // console.log(id)
    router.push("/archives/" + id)
  }
  
  watch(()=>route.params.id,(newval)=>{
    location.reload()
  })
  
  
  const homes = useHomes()
  let recommendList = ref([] as any);
  let { articleList, tagList, swiperList, CategoryList, articleListall } = storeToRefs(homes)
  
  let itemtit = ref("");
  watch(tagList,(newval)=>{
    // console.log(newval,"cate")
     let item =  newval.find((v:any)=>v.value==route.params.id)
    itemtit.value = item.label
  })
  
  //获取所有文章
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  homes.getArtitemall()
  homes.getArticle()
  //获取所有分类
  homes.getcategory()
  //获取所有标签
  homes.gettags()
  
  watch(articleListall, (newval) => {
    newval.slice(0, 6).forEach((item: any, index: number) => {
      setTimeout(() => {
        recommendList.value.push(item)
        proxy!.$forceUpdate() // 通知 Vue 强制更新视图
      }, index * 800);
    })
  })
  //跳转标签搜索
  let handeltocate = (id:any) =>{
    if(id=="") return
      router.push("/category/"+id)
      // console.log(id)
  } 
  //跳转标签搜索
let handeltags = (id:any) =>{
    if(id=="")return
    router.push("/tags/"+id)
    // console.log(id)
} 
  </script>
  
  <style lang="scss">
  .strong{
  color: pink;
}
  .home_box {
    height: 100vh;
    margin: 0 auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    background: #f0f2f5;
  
    .home_left_boxs {
      flex: 1;
      min-width: 500px;
      max-width: 900px;
      margin-right: 15px;
      background: none;
  
    }
  
    .home_right_boxs {
      width: 320px;
      height: 100vh;
      background: none;
      position: sticky;
      top: 0;
      right: 0;
  
      .right_overf {
        width: 100%;
        overflow: hidden;
      }
  
      .recommend_text {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 6px 0;
        animation: textrightx 0.8s;
        cursor: pointer;
  
        &:hover {
          color: pink;
        }
      }
    }
  
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
  .home_category {
    display: flex;
    flex-wrap: wrap;
  
    span {
      margin: 5px;
      cursor: pointer;
    }
  
    span:hover {
      color: pink;
    }
  }
  
  //隐藏滚动条
  html::-webkit-scrollbar {
    display: none;
  }
  
  .right_tag {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  
    button {
      padding: 3px 5px;
      margin: 5px;
      background: none;
      border: none;
      border: 1px solid #ccc;
      outline: none;
      cursor: pointer;
  
      &:hover {
        border: 1px solid #a61851;
      }
    }
  }
  
  @keyframes textrightx {
    0% {
      transform: translate(-100%);
    }
  
    100% {
      transform: translate(0);
    }
  }</style>